import React, { Component } from "react";
import { connect } from "dva";
import { Steps, Button } from "antd";
import { openNotificationWithIcon } from "utils/comm";
import router from "umi/router";
import StepOne from "./StepOne";
import StepTwo from "./StepTwo";
import StepThree from "./StepThree";
import styles from "./index.less";

const { Step } = Steps;

@connect(({ weekdaysManagement: { selectedYear } }) => ({
  selectedYear,
}))
class SetWeekdays extends Component {
  steps = [
    {
      title: "工作日设置",
      desc: "以周为维度，设置每周的工作日",
      content: <StepOne />,
    },
    {
      title: "节假日和例外设置",
      desc: "设置法定节假日和例外工作日",
      content: <StepTwo />,
    },
    {
      title: "完成",
      desc: "展示设置结果",
      content: <StepThree />,
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      current: 0,
    };
  }

  componentDidMount() {
    this.getData();
  }

  getData = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "weekdaysManagement/getWorkingDayList",
    });
    dispatch({
      type: "weekdaysManagement/getOffDayList",
    });
  };

  next = () => {
    const { current } = this.state;
    this.setState({ current: current + 1 });
  };

  prev = () => {
    const { current } = this.state;
    this.setState({ current: current - 1 });
  };

  add = () => {
    const { dispatch } = this.props;
    dispatch({
      type: "weekdaysManagement/addWorkingAndOffDay",
    }).then(({ errCode, errMsg }) => {
      if (errCode === 0) {
        openNotificationWithIcon("success", "", errMsg || "操作成功");
        router.push("/systemmanagement/weekdaysmanagement");
        dispatch({
          type: "weekdaysManagement/getOffDayList",
        });
      } else {
        openNotificationWithIcon("error", "", errMsg || "操作失败");
      }
    });
  };

  render() {
    const { current } = this.state;
    return (
      <div className={styles.root} style={{ minHeight: window.innerHeight - 64 - 16 - 16 }}>
        <div className={styles.stepWrap}>
          <Steps current={current} className={styles.step}>
            {this.steps.map(item => (
              <Step key={item.title} title={item.title} description={item.desc} />
            ))}
          </Steps>
        </div>
        <div className={styles.content}>{this.steps[current].content}</div>
        <div className={styles.btn}>
          {current > 0 && (
            <Button style={{ marginRight: 8 }} onClick={() => this.prev()}>
              上一步
            </Button>
          )}
          {current < this.steps.length - 1 && (
            <Button type="primary" onClick={() => this.next()}>
              下一步
            </Button>
          )}
          {current === this.steps.length - 1 && (
            <Button
              type="primary"
              onClick={() => this.add()}
            >
              完成
            </Button>
          )}
        </div>
      </div>
    );
  }
}

export default SetWeekdays;
